import React,{useState,useMemo,useCallback,useEffect,useRef} from 'react'
import {Link} from "react-router-dom"

export default function Register() {
  const [username,setUserName] = useState("xiaowang")
  const [password,setPassword] = useState("abc123")
  const [stu,setStu] = useState({id:1,name:"王小二"})
  const usernameRef = useRef()
  const newPassword = useMemo(()=>{
    console.log("计算属性");
    const len = password.length
    let res = "*"
    return res.repeat(len)
    
  })
  const newUsername = useCallback(()=>{
    return username.length
  },[username])

  // 模拟componentDidMount
  useEffect(()=>{
    console.log("componentDidMount");
  },[])

  // 模拟componentDidUpdate watch
  useEffect(()=>{
    console.log("更新操作");
  })

  // 模拟componentWillUnmount
  useEffect(()=>{
    console.log("componentDidMount2");
    //清除函数
    return ()=>{
      console.log("销毁组件");
    }
  },[])

  const changeUsername = ()=>{
    setUserName("xiaofeifei")
    // setStu({
    //   id:2,name:"王二麻子"
    // })
    // setStu({
    //   id:2,name:"王二麻子"
    // })
    console.log(username);
  }

  
  const changePassword = ()=>{
    setPassword("123456789")
  }

  const registerEvent = ()=>{
    // console.log(Register.inputElement);
    console.log(usernameRef);
  }

  return (
    <div>
      <h2>原始：{username}</h2>
      <h2>计算：{newUsername()}</h2>
      <button onClick={changeUsername}>修改</button>
      <h2>{newPassword}</h2>
      <button onClick={changePassword}>修改</button>
      <div>
        <input ref={usernameRef} type="text" placeholder='请输入用户名' />
      </div>
      <div>
        <input type="text" placeholder='请输入密码' />
      </div>
      <div>
        <button onClick={registerEvent}>注册</button>
        <Link to="/home">注册</Link>
      </div>
    </div>
  )
}